<template>
  <div id="Home">	
    <el-button type="primary" plain @click="getAnswer" style="margin-left: 17px"
      >发送</el-button
    >
    <div id="IO">
      <el-input
        type="textarea"
        :autosize="{ minRows: 11, maxRows: 11 }"
        placeholder="请输入你的问题"
        v-model="userInput"
        size="large"
      >
      </el-input>

      <el-input
        type="textarea"
        :autosize="{ minRows: 11, maxRows: 11 }"
        placeholder="AI回复"
        v-model="res"
        size="large"
      >
      </el-input>
    </div>
  </div>
</template>

<script>
	import axios from 'axios';
	import qs from 'qs';
	
	export default {
	  data() {
	    return {
	      userInput: '',
	      res : ''
	    };
	  },
	  methods: {
	    getAnswer() {
	
	      const requestBody0 = JSON.stringify({
	          pathParameters: { content: this.userInput }
	      });

	      const requestBody2 = {
	        content: this.userInput
	      };
	      axios.post('https://6b36b4e7983f47239aed30599335b947.apig.cn-north-4.huaweicloudapis.com/chat',
	          requestBody0,
	      )
	          .then(response => {
	            this.content = response.data.body;
	            this.res = response.data;
	
	            console.log(response.data);
	          })
	          .catch(error => {
	            console.warn('ai response is null', error);
				alert('请稍后再试！');
	          });
	    }
	  }
	};

</script>

<style>
#IO {
  display: flex;
  justify-content: center;
  margin: 27px 17px;
}
.el-input--large {
  margin: 17px;
  font-size: 27px !important;
}
</style>
